<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
    </head>
    <body>
        <h1>HTML5探秘：用requestAnimationFrame优化Web动画</h1>
        <p>来源:<a href=""></a></p>http://www.webhek.com/post/requestanimationframe.html
        <script>
            (function() {
                var lastTime = 0;
                var vendors = ['webkit', 'moz'];
                for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
                    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
                    window.cancelAnimationFrame =
                      window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
                }

                if (!window.requestAnimationFrame)
                    window.requestAnimationFrame = function(callback, element) {
                        var currTime = new Date().getTime();
                        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
                        var id = window.setTimeout(function() { callback(currTime + timeToCall); },
                          timeToCall);
                        lastTime = currTime + timeToCall;
                        return id;
                    };

                if (!window.cancelAnimationFrame)
                    window.cancelAnimationFrame = function(id) {
                        clearTimeout(id);
                    };
            }());
            // requestAnim shim layer by Paul Irish
                window.requestAnimFrame = (function(){
                  return  window.requestAnimationFrame       || 
                          window.webkitRequestAnimationFrame || 
                          window.mozRequestAnimationFrame    || 
                          window.oRequestAnimationFrame      || 
                          window.msRequestAnimationFrame     || 
                          function(/* function */ callback, /* DOMElement */ element){
                            window.setTimeout(callback, 1000 / 60);
                          };
                })();
              

            // example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/

            var canvas, context, toggle;

            init();
            animate();

            function init() {

                canvas = document.createElement( 'canvas' );
                canvas.width = 512;
                canvas.height = 512;

                context = canvas.getContext( '2d' );

                document.body.appendChild( canvas );

            }

            function animate() {
                requestAnimFrame( animate );
                draw();

            }

            function draw() {

                var time = new Date().getTime() * 0.002;
                var x = Math.sin( time ) * 192 + 256;
                var y = Math.cos( time * 0.9 ) * 192 + 256;
                toggle = !toggle;

                context.fillStyle = toggle ? 'rgb(200,200,20)' :  'rgb(20,20,200)';
                context.beginPath();
                context.arc( x, y, 10, 0, Math.PI * 2, true );
                context.closePath();
                context.fill();

            }
        </script>
    </body>
</html>